<template>
<div style="height:100%;">
  <div id="mapView" >
    <div class="map-container" id="baidu-map" :style="{ height: ( pageHeight - 120 ) + 'px' }" >
    </div>
    <div id="shopInfo">
      <h4>
        <span>门店列表</span>
        <span @click="showAreaFilterPanel= !showAreaFilterPanel">筛选</span>
      </h4>
      <div v-if="showAreaFilterPanel" id="selByDistrict">
        <h3>区域筛选</h3>
        <hr>
        <ul>
          <li v-for="areaItem in areas">
            <input type="checkbox" style="transform:scale(1.5)" v-model="AreaFilter[areaItem.id]" > {{areaItem.name}}
          </li>
        </ul>
      </div>
      <form role="form">
        <div class="form-group">
            <input class="form-control" placeholder="请输入店名查找" v-model="searchShop"> </input>
        </div>
      </form>
      <ul :style="{ 'max-height': (pageHeight - 300) + 'px', overflow: 'auto'}"  >
        <li v-for="shopItem, shopIndex in searchShopResult" @click.prevent.stop="locationShop(shopItem)" style="border-top:2px solid red; " >
          <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" class="normal">
            <circle class="cls-1" cx="200" cy="200" r="200"/>
            <path class="cls-2" d="M158.94,293.67h-.57a6.87,6.87,0,0,1-5-2.87l-61.75-87L71.55,218.86a6.86,6.86,0,0,1-8.23-11L89,188.6a6.91,6.91,0,0,1,5.17-1.29,6.83,6.83,0,0,1,4.54,2.81l61.12,86.11L327.72,108.34a6.86,6.86,0,1,1,9.69,9.7L163.79,291.66A6.83,6.83,0,0,1,158.94,293.67Z"/>
          </svg>
          <div class="info">
            <p>
              <span>{{areas[ shopItem.areaid].name }}</span>
              <span>{{shopItem.name}}</span>
            </p>
            <p>类型 :   {{shopItem.category}}</p>
            <p>编号 :   {{shopItem.id}}</p>
            <p @click.prevent.stop="showShopDetail = shopItem">联系 :   
              <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276 314.31" class="phone" >
                <path class="cls-1" d="M321,328.48a109.05,109.05,0,0,1-14.39,12.11c-27.16,19.09-62.52,21.58-92.81,8a280.67,280.67,0,0,1-59.23-36,286.5,286.5,0,0,1-48-48.17A281.77,281.77,0,0,1,70.06,203c-14-32.27-9.69-69.86,12.52-97.14a109.56,109.56,0,0,1,24.31-22.07,20.9,20.9,0,0,1,28.39,5.38l25.81,35.75a32.64,32.64,0,0,1-3.63,42.43l-14.26,14-.14.14c-1.76,1.91-20.32,24.08,25.59,70s68.09,27.35,70,25.59l.14-.14,14-14.25A32.64,32.64,0,0,1,295.17,259l34,24.59A20.88,20.88,0,0,1,334.58,312,108.9,108.9,0,0,1,321,328.48Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M218,172.88a2.14,2.14,0,0,1-.6-1.84,40,40,0,0,0-28.65-44.55,2.14,2.14,0,1,1,1.16-4.12,44.29,44.29,0,0,1,31.72,49.32,2.14,2.14,0,0,1-3.63,1.19Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M255.69,179.54a3.21,3.21,0,0,1-.91-2.76A77.86,77.86,0,0,0,199,90.08a3.21,3.21,0,1,1,1.74-6.18,84.29,84.29,0,0,1,60.37,93.86,3.21,3.21,0,0,1-5.45,1.79Z" transform="translate(-62 -42.84)"/><path class="cls-1" d="M295.87,186.58a4.28,4.28,0,0,1-1.21-3.68A118.22,118.22,0,0,0,210,51.25,4.28,4.28,0,0,1,212.32,43,126.79,126.79,0,0,1,303.13,184.2a4.28,4.28,0,0,1-7.26,2.39Z" transform="translate(-62 -42.84)"/>
              </svg>
              <span style="color:#80abcb; cursor:pointer">联系我们</span> 
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div id="showShopDetail" v-if="showShopDetail">
    <p>
      <span>{{showShopDetail.areaid}}</span>
      <span style="margin-left:20px;">{{showShopDetail.name}}</span>
    </p>
    <p>防损科电话: {{showShopDetail.contract }}</p>
    <p>防损科长: {{ showShopDetail.charger }} </p>
    <p>手机号: {{ showShopDetail.contract }} </p>
    <p>地址: {{ showShopDetail.name }}</p>
    <p>区负责人: {{ areas[showShopDetail.areaid].charger }} </p>
    <p>手机号: {{ areas[showShopDetail.areaid].mobile_phone }}  </p>
    <button class="btn btn-info" @click.prevent.stop="showShopDetail = null">关闭</button>
  </div>
</div>
</template>


<script>

import marker_alarm_img from './assets/marker_alarm.png'
import marker_bufang_img from './assets/marker_bufang.png'
import marker_chefang_img from './assets/marker_chefang.png'


export default {
    name: 'baiduMap',

    data () {
        return { 
          map: null ,
          currentAlarmAreaId: null,
          currentAlarmShopid:null,
          showAlarmArea: false,
          searchShop:'',
          showShopDetail:null,
          showAreaFilterPanel: false,
          AreaFilter:{}
        }
    },
    mounted(){
    },
    computed: { 
        shops: function() { 
            return this.$store.state.shops;
        },
        areas(){
          return this.$store.state.areas;
        },
        protectors(){ 
          return this.$store.state.protectors;
        },
        searchShopResult() {
            var ret = [];
            let vm = this;
            if( !vm.shops ){
                return {}
            }
            for( let id in vm.shops ) {
                if( vm.shops[id].name.search( vm.searchShop ) >= 0 ) {
                  ret.push( vm.shops[id] )
                }
            }
            ret = ret.filter(function(item){
              let areaid =  item.areaid;
              return vm.AreaFilter[item.areaid]
            })
            return ret;
        },
        pageWidth(){
          return window.innerWidth;
        },
        pageHeight(){
          console.log( "-----------------", window.innerHeight )
          return window.innerHeight;
        }
    },
    methods: {
      locationShop: function( shopItem ) {
        console.log(shopItem); 
        try{
          var map = new BMap.Map('baidu-map')              // 创建地图实例  
          var point = new BMap.Point(shopItem.location.x,shopItem.location.y)  // 创建点坐标  
          map.centerAndZoom( point, 20)
          map.enableScrollWheelZoom(true)
          this.map = map;
        } catch ( error) { 
          console.log( error );
        }
        this.drawMapMarker( this.shops )
      },
      refineStatus:function( shop ){ 
        console.log( 'refine status: ', shop, shop.protector.arm_areas )
        for( let i in this.protectors[shop.mac].status ){ 
        }
      },
      getStatusIcon( protector  ){
        if( protector.status == 'a'){
          return marker_alarm_img;
        }
        else if( protector.status == 'b'){
          return marker_bufang_img ;
        }
        else if( protector.status == 'c'){
          return marker_chefang_img;
        }
        else if( protector.status == 'p'){
          return marker_chefang_img;
        }
        else {
          return marker_chefang_img;
        }
      },

      getStatusColor( protector ){
        for( let id in protector.arm_areas ){
          if( protector.arm_areas[id].s == 'a' ){
            return 'red'
          }
        }
        return  'rgb(75,137,220)'
      },


      drawMapMarker( shops ){
        for( let id in shops) { 
          try{
            var point = new BMap.Point( shops[id].location.x, shops[id].location.y );    
            var marker = new BMap.Marker( point, {icon: new BMap.Icon( this.getStatusIcon( this.protectors[shops[id].mac] ), new BMap.Size(57,69 ) ) } );
            this.map.addOverlay( marker );

            var label = new BMap.Label( shops[id].name , { offset: new BMap.Size( 0, -40)} );
            label.setStyle(
            {  
                display: "none",
                color:'black', 
                fontSize:'20px', 
                minWidth: '200px', 
                height: '50px', 
                backgroundColor:'white',
                borderRadius: '20px',
                lineHeight: "50px",
                textAlign: "center"
            });

            marker.setLabel(  label )

            marker.addEventListener( 'mouseover', function( e ){
              this.getLabel().setStyle( { display: "block", width: "100px",  pointer: "cursor" })
              console.log( this.getLabel())

            });

            marker.addEventListener( "mouseout", function( e ){
              this.getLabel().setStyle( { display: 'none' })
            });
            marker.addEventListener( 'click', (e) => { 
              this.$router.push( "/security/" + id )
            })
          }catch( error ){
            console.log( "error:" , error )
          }
        }
      }

    },

    watch: { 
        shops: function( current, origin ) { 
            console.log( "watch the change of shops")
            console.log( "origin shops: ", origin)
            console.log( "current shops: ", current)
            this.drawMapMarker( current )
        },
        /*just for test 
        '$store.state.shops' : function( current, origin ) { 
            console.log( 'origin state: ',  origin )
            console.log( 'current state: ', current )
        }
        */
    },
    beforeUpdate( ) {
        //never called, because template doesn't contain any data
        console.log( "beforeUpdate: shops map updated")
        console.log( this.shops )
        this.drawMapMarker( this.shops )
    },
    mounted() { 

        for( let i in this.areas){
          this.$set( this.AreaFilter , i , true );
        }
        console.log( 'show shops on map')
        try{
          var map = new BMap.Map('baidu-map')              // 创建地图实例  
          var point = new BMap.Point(116.374619,39.99935)  // 创建点坐标  
          map.centerAndZoom( point, 12)
          map.enableScrollWheelZoom(true)
          this.map = map;
        } catch ( error) { 
          console.log( error );
        }
        //never called, because template doesn't contain any data
        console.log( this.shops )
        this.drawMapMarker( this.shops )
    }
}
</script>

<style scoped>

.cls-1{
  fill:#97c598;
}
.cls-2{
  fill:#fff;
}
h4{
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  text-align: center;
  color: white;
  background-color: #0087DA;
}
#shopInfo h4 span:nth-of-type(2){
  position: absolute;
  right: 0px;
  cursor: pointer;
  font-size: 18px;
}

*{
  margin: 0px;
  padding: 0px;
}
#mapView{
  position: relative;
}
#selByDistrict{
  position: absolute;
  left: 360px;
  max-height: 600px;
  overflow: auto;
  width: 300px;
  border: 1px solid #f1f1f1;
  background-color: #0087d4;
  color: white;
}
#selByDistrict h3{
  text-align: center;
  padding: 5px;
}
#selByDistrict ul li{
  height: 30px;
  line-height: 30px;
  margin: 5px 0px;
  background-color: #a1a1a1;
  padding-left: 10px;
  white-space: nowrap;
  font-size: 16px;
}
#selByDistrict ul li input{
  margin: 0 10px;
}
#shopInfo{
  width: 360px;
  position: absolute;
  min-height: 600px;
  top: 40px;
  left: 100px;
  max-height: 800px;
  background-color: #f1f1f1;
  border: 1px solid grey;
}
#shopInfo .form-control{
  margin:  20px 5% ;
  width: 90%;
}
#shopInfo ul{
  background-color: #fafafa;
  margin: 5px;
  cursor: pointer;
}
#shopInfo p{
  padding-left: 20px;
  border-bottom: 1px solid #e1e1e1
}
#shopInfo .phone{
  width: 15px;
}
#shopInfo .normal{
  position: relative;
  top: -30px;
  width: 30px;
  display: inline-block;
  margin: 0px 5px;
}
#shopInfo .info{
  display: inline-block;
}
/* #shopInfo .info p:nth-of-type(1){
  height: 40px;
  font-size: 20px;
  line-height: 30px;
} */
#shopInfo .info p{
  height: 30px;
  font-size: 16px;
  line-height: 30px;
}

#shopInfo .info p span:nth-of-type(1){
  margin-right: 20px;
}


#showShopDetail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background-color: #0087da;
  padding: 20px 40px;;
}
#showShopDetail p:nth-of-type(1){
  height: 40px;
  font-size: 22px;
  text-align: center;
  line-height: 40px;
  margin-bottom: 20px;
}
#showShopDetail p{
  height: 30px;
  font-size: 18px;
  color: white;
  border-bottom: 1px solid #f1f1f1;
}

#showShopDetail button{
  margin: 20px auto 0;
  display: block;
  width: 60px;
  padding: 10px;
  height: 40px;
}

.protector-status{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  line-height: 50px;
  position: relative;
  right: 60px;
}

.shop-detail > div{
  display: inline-block;
  vertical-align: center;
}

.shop-item{ 
  border-bottom:2px grey solid ;
}

.map-container{ 
  width: 100%;
  overflow: hidden;
}
#baidu-map{ 
  width:100%;
}
</style>